import GraphBack from '../../src'
function draw() {
  document.querySelectorAll('.graph-background').forEach((ele) => drawBackground(ele))
}
window.addEventListener('resize', () => draw())

function drawBackground(ele) {
  const board = new GraphBack.Board(ele, { create: true, color: '#235fa7', lineWidth: 1 })
  const w = board.width
  const h = board.height
  const pointStr1 = `5,45 5,140`
  const pointStr2 = `145,${h - 5} 40,${h - 5} 10,${h - 35} 10,40 40,5 150,5 170,20 ${w - 15},20`
  const pointStr3 = `245,${h - 1} 36,${h - 1} 14,${h - 23} 14,${h - 100}`
  const pointStr4 = `7,${h - 40} 7,${h - 75}`
  const pointStr5 = `28,24 13,41 13,64`
  const pointStr6 = `14,75 14,180`
  const pointStr7 = `55,11 147,11 167,26 250,26`
  const pointStr8 = `158,5 173,16`
  const pointStr9 = `200,17 400,17`
  const pointStr10 = `${w - 100},17 ${w - 10},17`
  const paths = [
    { path: pointStr1 },
    { path: pointStr2 },
    { path: pointStr3, color: '#84e4ff' },
    { path: pointStr4, lineWidth: 3, lineCap: 'round' },
    { path: pointStr5, lineWidth: 3, lineCap: 'round' },
    { path: pointStr6, color: '#84e4ff' },
    { path: pointStr7, color: '#84e4ff' },
    { path: pointStr8, color: '#84e4ff', lineWidth: 3, lineCap: 'round' },
    { path: pointStr9, lineWidth: 3, lineCap: 'round' },
    { path: pointStr10, color: '#84e4ff', lineWidth: 3, lineCap: 'round' }
  ]
  for (let i = 0; i < paths.length; i++) {
    const { path, ...other } = paths[i]
    const points = path.split(' ').map((item) => item.split(','))
    board.add(new GraphBack.Polyline({ points, ...other }))
  }
  board.render()
}
